<html>
<head>
    <script src="../libraries/RGraph.common.core.js" ></script>
    <script src="../libraries/RGraph.common.dynamic.js" ></script>
    <script src="../libraries/RGraph.common.tooltips.js" ></script>
    <script src="../libraries/RGraph.common.effects.js" ></script>
    <script src="../libraries/RGraph.drawing.poly.js" ></script>
    <script src="../libraries/RGraph.line.js" ></script>
    <script src="../libraries/jquery.min.js" ></script>
    
    <title>A dual color clickable filled range Line chart</title>
    
    <link rel="stylesheet" href="demos.css" type="text/css" media="screen" />
    
    <meta name="description" content="A range Line chart which shows two colors - the threshold of which is settable" />
</head>
<body>

    <h1>A dual color clickable filled range Line chart</h1>
    
    <p>
        By using the Poly drawing API object with a filled range chart you can make the filled range clickable.
    </p>

    <canvas id="cvs" width="600" height="250">[No canvas support]</canvas>


    <script>
        window.onload = function ()
        {
            var line = new RGraph.Line('cvs', [3,4,6,5,2,4,5,5,6,8,7,4,8,9,8,6,5,2,5,4], [12,13,15,16,12,13,15,14,21,22,20,13,15,16,18,19,16,15,13,18])
                .Set('filled', true)
                .Set('fillstyle', 'red')
                .Set('filled.range', true)
                .Set('colors', ['black'])
                .Set('linewidth', 1)
                .Set('numxticks', 8)
                .Set('ymax', 50)
                .Set('numxticks', 19)
                .Set('background.grid.autofit.numvlines', 19)
            RGraph.Effects.Line.jQuery.Trace(line, null, drawPoly);
            
            function drawPoly ()
            {
                /**
                * Extract the coords from the Line chart coords
                */
                var coords = [];
                for (var i=0; i<(line.coords.length / 2); i+=1) {
                    coords.push(line.coords[i]);
                }

                for (var i=(line.coords.length - 1); i>=(line.coords.length / 2);i-=1) {
                    coords.push(line.coords[i]);
                }

                var poly = new RGraph.Drawing.Poly('cvs', coords)
                    .Set('strokestyle', 'rgba(0,0,0,0)')
                    .Set('fillstyle', 'rgba(0,0,0,0)')
                    .Set('tooltips', ['The tooltip!'])
                    .Set('highlight.fill', 'rgba(255,255,255,0.5)')
                    .Draw();
            }
        }
    </script>

    <p>
        <a href="./">&laquo; Back</a>
    </p>

</body>
</html>

